<template>
  <div id="app">
    <router-view></router-view>
    <el-dialog
      v-el-drag-dialog
      title="修改密码"
      :close-on-click-modal="false"
      @close="changePwdDialogClose"
      :visible.sync="changePwdDialogVisible"
      :before-close="passwordHandleClose"
      :close-on-press-escape="false"
      width="45%"
    >
      <change-password ref="changePasswordFrom"></change-password>
    </el-dialog>
    <el-dialog v-el-drag-dialog title :visible.sync="loginDialogVisible" :before-close="handleClose" width="60%" v-if="!loginDialogVisible">
      <process-login></process-login>
    </el-dialog>
  </div>
</template>

<script>
import processLogin from '@/views/basicViews/login/login-innerSYS'
import changePassword from '@/views/basicViews/change-password'
import { getCookie } from '@/utils/utils'

export default {
  name: 'App',
  data() {
    return {
      loading: null
    }
  },
  computed: {
    loginDialogVisible() {
      return this.$store.state.app.processLogin
    },
    changePwdDialogVisible() {
      return this.$store.state.user.passwordPageStatus
    },
    isloading() {
      return this.$store.state.app.isLoading
    }
  },
  components: {
    processLogin,
    changePassword
  },
  watch: {
    isloading(data) {
      if (data) {
        this.openLoading()
      } else {
        this.closeLoading()
      }
    }
  },
  created() {
    // this.$router.push('/layout')
  },
  methods: {
    handleClose(done) {
      if (getCookie('UserId_DX_H')) {
        this.$store.dispatch('app/process_login_status', false)
      } else {
        this.$router.push('/login')
      }
      done()
    },
    passwordHandleClose(done) {
      done()
      this.$store.dispatch('user/setPasswordPageStatus', false)
    },
    openLoading() {
      this.loading = this.$loading({
        background: 'rgba(255, 255, 255, 0)'
      })
    },
    closeLoading() {
      this.$nextTick(() => {
        // 以服务的方式调用的 Loading 需要异步关闭
        this.loading.close()
      })
    },
    changePwdDialogClose() {
      this.$refs['changePasswordFrom'].resetFrom()
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'microsoft YaHei';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
  /* 全局滚动条样式统一 */
  // ::-webkit-scrollbar {
  //     width: 15px; /*纵向滚动条宽度*/
  //     height: 10px; /*横向滚动条高度*/
  // }
  // ::-webkit-scrollbar-thumb {
  //     border-radius: 0;  // 设置滚动条圆角
  //   }
  // body.el-table th.gutter{
  //   display: table-cell!important;
  // }
}

.icon {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
